<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="left">
        <!-- <img src="../assets/heima.png" alt="" /> -->
        <span>宠物点单管理系统</span>
      </div>
      <el-switch
        style="display: block"
        v-model="open"
        @change="changeOpen"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-text="开店"
        inactive-text="关店"
        class="open"
      >
      </el-switch>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
      <audio ref="audioTip" muted :src="auto.src"></audio>
      <!-- 侧边栏 -->
      <!-- <el-aside :width="isCollapse ? '64px' : '200px'"> -->
      <el-aside width="200px">
        <!-- 侧边栏菜单区域 -->
        <el-menu
          :default-active="activePath"
          class="el-menu-vertical-demo menu"
          background-color=" rgb(0, 21, 41)"
          text-color="white"
          active-text-color="#1661ab"
          active-background-color="#1661ab"
          unique-opened="true"
          router
        >
          <el-submenu index="1" v-if="sureAdmin">
            <template slot="title">
              <i class="el-icon-s-marketing icon"></i>
              <span>数据统计</span>
            </template>
            <el-menu-item index="/report" @click="saveNavState('/report')"
              >营业额统计</el-menu-item
            >
            <el-menu-item
              index="/userReport"
              @click="saveNavState('/userReport')"
              >用户统计</el-menu-item
            >
            <el-menu-item
              index="/MilkTeaVolume"
              @click="saveNavState('/MilkTeaVolume')"
              >奶茶销量</el-menu-item
            >
            <el-menu-item
              index="/CommodityVolume"
              @click="saveNavState('/CommodityVolume')"
              >商品销量</el-menu-item
            >
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-setting icon"></i>
              <span>基础设置</span>
            </template>
            <el-menu-item index="/store" @click="saveNavState('/store')"
              >门店信息</el-menu-item
            >
            <el-menu-item
              index="/staff"
              @click="saveNavState('/staff')"
              v-if="sureAdmin"
              >员工账号</el-menu-item
            >
            <el-menu-item index="/carousel" @click="saveNavState('/carousel')"
              >轮播图管理</el-menu-item
            >
            <el-menu-item index="/activity" @click="saveNavState('/activity')"
              >活动管理</el-menu-item
            >
            <el-menu-item index="/recommend" @click="saveNavState('/recommend')"
              >首页推荐</el-menu-item
            >
            <el-menu-item index="/member" @click="saveNavState('/member')"
              >会员定制</el-menu-item
            >
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-milk-tea icon"></i>
              <span>点单管理</span>
            </template>
            <el-menu-item index="/milkyTea" @click="saveNavState('/milkyTea')"
              >点单列表</el-menu-item
            >
            <el-menu-item
              index="/milkyTeaType"
              @click="saveNavState('/milkyTeaType')"
              >点单分类</el-menu-item
            >
            <el-submenu index="1-4">
              <template slot="title">点单规格</template>
              <el-menu-item
                index="/temperature"
                @click="saveNavState('/temperature')"
                >温度</el-menu-item
              >
              <el-menu-item
                index="/sweetness"
                @click="saveNavState('/sweetness')"
                >糖分</el-menu-item
              >
              <el-menu-item index="/material" @click="saveNavState('/material')"
                >配料</el-menu-item
              >
            </el-submenu>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-s-goods icon"></i>
              <span>商城管理</span>
            </template>
            <el-menu-item index="/commodity" @click="saveNavState('/commodity')"
              >商城列表</el-menu-item
            >
            <el-menu-item
              index="/commodityType"
              @click="saveNavState('/commodityType')"
              >商品分类</el-menu-item
            >
            <el-menu-item index="/flavor" @click="saveNavState('/flavor')"
              >商品口味</el-menu-item
            >
          </el-submenu>
          <el-menu-item index="/order" @click="saveNavState('/order')">
            <i class="el-icon-s-order icon"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          <!-- <el-menu-item index="6-1">会员列表</el-menu-item> -->
          <el-menu-item
            index="/users"
            @click="saveNavState('/users')"
            v-if="sureAdmin"
          >
            <i class="el-icon-user-solid icon"></i>
            <span slot="title">用户管理</span>
          </el-menu-item>
          <el-menu-item index="/coupon" @click="saveNavState('/coupon')">
            <i class="el-icon-s-ticket"></i>
            <span slot="title">优惠管理</span>
          </el-menu-item>
          <el-menu-item
            index="/wallet"
            @click="saveNavState('/wallet')"
            v-if="sureAdmin"
          >
            <i class="el-icon-s-finance icon"></i>
            <span slot="title">钱包管理</span>
          </el-menu-item>
          <el-menu-item
            index="/recharge"
            @click="saveNavState('/recharge')"
            v-if="sureAdmin"
          >
            <i class="el-icon-money"></i>
            <span slot="title">充值记录</span>
          </el-menu-item>
          <el-menu-item
            index="/consume"
            @click="saveNavState('/consume')"
            v-if="sureAdmin"
          >
            <i class="el-icon-money"></i>
            <span slot="title">消费记录</span>
          </el-menu-item>
          <el-menu-item
            index="/evaluate"
            @click="saveNavState('/evaluate')"
            v-if="sureAdmin"
          >
            <i class="el-icon-s-comment"></i>
            <span slot="title">员工评价</span>
          </el-menu-item>
          <div style="height: 60px"></div>
        </el-menu>
      </el-aside>
      <!-- 右侧内容主体 -->
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 被激活的链接地址
      activePath: "",
      sureAdmin: false,
      open: true,

      // 新增订单数量
      newOrder: 0,
      //音频
      auto: {
        src: require("../assets/mp3/newOrder.mp3"),
      },
      //查询已支付的订单
      queryPaidInfo: {
        // 当前的页数
        pageNo: 1,
        // 当前每页显示多少条数据
        pageSize: 10,
        stateId: 2,
      },
      paidtotal: 0,
    };
  },
  created() {
    // this.getMenuList();
    this.activePath = window.localStorage.getItem("activePath");
    var Admin = window.localStorage.getItem("admin");
    if (Admin == 1) {
      this.sureAdmin = true;
    } else {
      this.sureAdmin = false;
    }
    this.sureOpen();
    window.localStorage.removeItem("lastOrder");
  },
  mounted() {
    if (this.timer) {
      clearInterval(this.timer);
    } else {
      this.timer = setInterval(() => {
        this.getPaidOrder();
      }, 5000);
    }
  },
  destroyed() {
    clearInterval(this.timer);
  },
  // 监听异常发生变化，语音播报
  watch: {
    newOrder: function (newVal, oldVal) {
      // console.log("变化了");
      // console.log(newVal, oldVal);
      if (newVal > oldVal) {
        this.aplayAudio();
      }
    },
  },
  methods: {
    aplayAudio() {
      // console.log("进入了");
      this.$refs.audioTip.play();
    },
    //获得已支付的订单
    async getPaidOrder() {
      const { data: res } = await this.$http.get("order/listOrderByState", {
        params: this.queryPaidInfo,
      });
      this.paidtotal = res.data.count;
      // console.log("已支付订单", res);
      // console.log("xxxx", this.paidtotal);
      if (window.localStorage.getItem("lastOrder")) {
        this.newOrder =
          this.paidtotal - window.localStorage.getItem("lastOrder");
      } else {
        window.localStorage.setItem("lastOrder", this.paidtotal);
      }
    },
    logout() {
      window.localStorage.clear();
      this.$router.push("/login");
    },
    // 保存链接的激活状态
    saveNavState(activePath) {
      window.localStorage.setItem("activePath", activePath);
      this.activePath = activePath;
    },
    async sureOpen() {
      const { data: res } = await this.$http.post("open/getOpen");
      if (res.code !== 200) {
        return this.$message.error("获取开门信息失败！");
      }
      if (res.data.open.open === 1) {
        this.open = true;
      } else {
        this.open = false;
      }
    },
    async changeOpen() {
      let params = new FormData();

      if (this.open === true) {
        params.append("open", 1);
      } else {
        params.append("open", 2);
      }
      const { data: res } = await this.$http.post("open/updateOpen", params);
      if (res.code !== 200) {
        return this.$message.error("失败！");
      }
      return this.$message.success("成功！");
    },
  },
};
</script>

<style lang="less" scoped>
.home-container {
  height: 100%;
}
.el-header {
  //   background-color: #373d41;
  background-color: white;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: rgb(80, 80, 80);
  font-size: 20px;
  .left {
    display: flex;
    align-items: center;
    flex: 1;
    span {
      margin-left: 15px;
    }
  }
  .open {
    margin-right: 50px;
  }
}

.el-aside {
  background-color: rgb(0, 21, 41);
  position: absolute;
  height: 100%;
  // top: 50px;
  // bottom: 0;
  // left: 0;
  // width: 220px; // transition: width 10s;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .el-menu {
    border-right: none;
  }
  // .icon{
  //   color: rgb(226, 226, 226);
  // }
}

.el-main {
  background-color: rgb(245, 243, 243);
  // position: absolute;
  // height: 100%;
  // overflow-y: auto;
  position: absolute;
  left: 200px;
  right: 0;
  top: 60px;
  bottom: 0;
  overflow-y: scroll;
}

.iconfont {
  margin-right: 10px;
}

.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.el-menu-item:hover,
.el-submenu :hover {
  background-color: #527cee30 !important;
}

.el-menu-item.is-active {
  color: rgb(20, 146, 248) !important;
  background: #0984ff30 !important;
  border-right: rgb(69, 127, 252) 5px solid !important;
}
</style>

